<template>
  <h2>显示电子汇劵信息(公共页面)</h2>
    <input type="button" value="批删" @click="DeleteAll">
  <table class="table-bordered" border="1">
  
    <thead>
      <tr>
        <td>
          <input type="checkbox" v-model="flag" @change="GetAll">
        </td>
        <td>电子汇劵编号</td>
        <td>电子汇劵名称</td>
        <td>电子汇劵颜色</td>
        <td>电子汇劵库存</td>
        <td>开始日期</td>
        <td>结束日期</td>
        <td>客服电话</td>
        <td>使用说明(只有当选择兑换券才有)</td>
        <td>折扣信息(只有当选择折扣券才有)</td>
        <td> 适用业务(只有当选择折扣券才有)</td>
        <td>代金劵(只有当选择代金劵才有)</td>
        <td>电子汇劵类型</td>
        <td>门店名称</td>
        <td>操作</td>
      </tr>
    </thead>
    <tbody>
      
      <tr v-for="item in bill">
         <td>
          <input type="checkbox"  :checked="Ischeck" v-model="addIds" :value="item.bill_Id" @change="ReveresCheck">
        </td>
        <td>{{ item.bill_Id }}</td>
        <td>{{ item.bill_Name }}</td>
        <td>{{ item.bill_Color }}</td>
        <td>{{ item.bill_Num }}</td>
        <td>{{ item.bill_StartTime.substring(0, 10) }}</td>
        <td>{{ item.bill_EndTime.substring(0, 10) }}</td>
        <td>{{ item.bill_Phone }}</td>
        <td>{{ item.bill_Info }}</td>
        <td>{{ item. bill_Discount}}</td>
        <td>{{ item.bill_Business }}</td>
        <td>{{ item.bill_Money }}</td>
        <td>
          {{
            item.bill_Type == 0
              ? "代金券"
              : item.bill_Type == 1
              ? "折扣券"
              : "兑换券"
          }}
        </td>
        <td>{{ item.shop_Name }}</td>
        <td>
          <slot :id="item.bill_Id"></slot>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import axios from "axios";

//全选数据
const flag = ref(false);
// 反选数据   定义数据，保存所有选中数据的value值 
// 并获取到所有选中数据的id
const addIds = ref([]);

//是否选中
const Ischeck=ref(false)
// 创建电子汇劵响应式数据
const bill:any = ref([
  {
    bill_Id: 0,
    bill_Name: "",
    bill_Color: "",
    bill_Num: 0,
    bill_StartTime: "",
    bill_EndTime: "",
    bill_Phone: "",
    bill_Info: "",
    bill_Discount: 0,
    bill_Business: "",
    bill_Money: 0,
    bill_Type: 0,
    shop_Name: "",
  },
]);

onMounted(() => {
  ShowBill();
});
//显示电子汇劵信息
const ShowBill = () => {
  axios.get("https://localhost:7071/api/ElectronicBil/ShowBillInfo")
    .then((res) => {
      bill.value = res.data;
    });
};



// 全选
const GetAll = () => {
  // 判断是否全选
  if (flag.value) {
   
    Ischeck.value = true;
    // map()方法创建一个新数组,对原来数组中的每个元素进行操作,返回操作后的新数组
    addIds.value = bill.value.map((item: any) => {
      return item.bill_Id;
   
   })
  }
  else {
    Ischeck.value = false;
    // 清空数组
    addIds.value = [];
  }
// alert(addIds.value.toString());
}



// 反选
const ReveresCheck = () => {
  // 判断选择中数据长度是否和总数量相等
  if (addIds.value.length == bill.value.length) { 
    flag.value = true;
  }
  else {
    flag.value = false;
  }
}

// 批删
const DeleteAll = () => {
  if (addIds.value.length<= 0) {
    alert('请选择批删的数据');
    return;
  }

  if (!confirm('确定要删除吗?')) { 
    return;
  }

  axios.get('https://localhost:7071/api/ElectronicBil/BillDeleteInfo', {
    params: {
      // addIds.value.toString():所选择的要删除的编号
      Idstring:addIds.value.toString()
    }
  })
  .then(res=>{
    if (res.data > 0) {
      alert('删除成功');
    }
    else {
      alert('删除失败');
    }
  })
  .catch(err=>{
    console.log(err);
  })
  ShowBill();
}
</script>

<style scoped>
</style>